<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chit-chat</title>
    <link rel="stylesheet" href="css/common.css">
<!--    <link rel="stylesheet" href="css/client.css">-->
    <link rel="stylesheet" href="css/client_new.css">
</head>
<body>
<!-- 作为遮罩层, 实现背景模糊的效果 -->
<div class="cover"></div>
<!-- 这个 div 作为整个界面的总的容器 -->
<div class="client-container">
    <!-- 中间的聊天区域 -->
    <div class="main">
        <!-- 左侧区域, 显示好友列表和会话列表 -->
        <div class="left">
            <!-- 当前登录用户的用户名 -->
            <div class="user" >

            </div>
            <!-- 这是搜索框 -->
            <div class="search">
                <!-- 搜索框中的输入框 -->
                <input type="text" id="search-input">
                <!-- 点击按钮进行搜索 -->
                <button></button>
            </div>
            <!-- 标签页 -->
<!--            <div class="tab">-->
<!--                &lt;!&ndash; 会话列表标签 &ndash;&gt;-->
<!--                <div class="tab-session"></div>-->
<!--                &lt;!&ndash; 好友列表标签 &ndash;&gt;-->
<!--                <div class="tab-friend"></div>-->
<!--            </div>-->

            <div class="tab">
                <!-- 会话列表标签 -->
                <div class="tab-session active">
                    <div class="tab-icon"></div>
                    <span>会话</span>
                </div>
                <!-- 好友列表标签 -->
                <div class="tab-friend">
                    <div class="tab-icon"></div>
                    <span>好友</span>
                </div>
            </div>



            <!--好友添加列表-->
<!--            <ul class="addlist" id="addFriend-list">-->
<!--                <li>-->
<!--                    <div class="request-content">-->
<!--                        <div class="request-info">-->
<!--                            <h4 class="username">张三</h4>-->
<!--                            <p class="reason">你好，可以认识一下吗</p>-->
<!--                        </div>-->
<!--                        <div class="request-actions">-->
<!--                            <button class="accept-btn">同意</button>-->
<!--                            <button class="reject-btn">拒绝</button>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </li>-->
<!--                <li>-->
<!--                    <div class="request-content">-->
<!--                        <div class="request-info">-->
<!--                            <h4 class="username">张三</h4>-->
<!--                            <p class="reason">你好，可以认识一下吗</p>-->
<!--                        </div>-->
<!--                        <div class="request-actions">-->
<!--                            <button class="accept-btn">同意</button>-->
<!--                            <button class="reject-btn">拒绝</button>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </li>-->
<!--            </ul>-->
            <!-- 会话列表 -->
            <ul class="list" id="session-list">
<!--                <li class="friend-request">-->
<!--                    <div class="request-content">-->
<!--                        <div class="request-info">-->
<!--                            <h4 class="username">张三</h4>-->
<!--                            <p class="reason">你好，可以认识一下吗</p>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="request-actions">-->
<!--                        <button class="accept-btn">同意</button>-->
<!--                        <button class="reject-btn">拒绝</button>-->
<!--                    </div>-->
<!--                </li>-->
<!--                <li>-->
<!--                    <h3>lisi</h3>-->
<!--                    <p>晚上吃啥</p>-->
<!--                </li>-->
<!--                <li>-->
<!--                    <h3>lisi</h3>-->
<!--                    <p>晚上吃啥</p>-->
<!--                </li>-->
            </ul>
            <!-- 好友列表 -->
            <ul class="list hide" id="friend-list">
<!--                <li>-->
<!--                    <h4>lisi</h4>-->
<!--                </li>-->
<!--                <li>-->
<!--                    <h4>lisi</h4>-->
<!--                </li>-->
<!--                <li>-->
<!--                    <h4>lisi</h4>-->
<!--                </li>-->
<!--                <li>-->
<!--                    <h4>lisi</h4>-->
<!--                </li>-->
<!--                <li>-->
<!--                    <h4>lisi</h4>-->
<!--                </li>-->
            </ul>

        </div>
        <!-- 右侧区域, 显示聊天编辑框 -->
        <div class="right">
            <!-- 会话标题 -->
            <div class="title"></div>
            <!-- 消息区 -->
            <div class="message-show">
                <!-- <div class="message message-left">
                    <div class="box">
                        <h4>lisi</h4>
                        <p>今天吃啥</p>
                    </div>
                </div>
                <div class="message message-right">
                    <div class="box">
                        <h4>zhangsan</h4>
                        <p>随便</p>
                    </div>
                </div> -->

                    <!--好友添加-->
<!--                <div class="add-friend-box">-->
<!--                    <div class="friend-info">-->
<!--                        <span class="username">张三</span>-->
<!--                    </div>-->
<!--                    <div class="form-group">-->
<!--                        <textarea id="add-reason" rows="2" placeholder="输入添加原因（选填）"></textarea>-->
<!--                    </div>-->
<!--                    <button id="send-request-btn" class="send-btn">发送请求</button>-->
<!--                </div>-->

            </div>
            <!-- 消息编辑框 -->
            <textarea class="message-input"></textarea>
            <!-- 发送按钮 -->
            <div class="ctrl">
                <button>发送</button>
            </div>
        </div>
    </div>
</div>

<!-- 引入 jquery, 注意, 这个引入操作要在使用之前! 否则会找不到相关函数的定义 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="js/client.js"></script>

</body>
</html>